<template>
    <el-drawer v-model="props.monitorVisible" size="1200" :before-close="handleClose" class="monitor-drawer">
        <template #header>
            <h4>信号配置</h4>
        </template>
        <div class="monitor-btn mt20">
            <!-- <el-button icon="Plus" type="primary" size="small" @click="addMonitor">新增</el-button> -->
            <el-button type="primary" icon="Edit" size="small" @click="editMonitor(formRef)">修改</el-button>
            <el-button type="primary" icon="Delete" size="small" @click="deleteMonitor">删 除</el-button>
        </div>

        <div class="monitor-content">
            <div class="monitor-left">
                <el-tree :data="data" node-key="id" default-expand-all :props="defaultProps"
                    @node-click="handleNodeClick" />
            </div>
            <div class="monitor-right">
                <el-form ref="formRef" :model="formData" :rules="formRules" label-width="130px">
                    <el-card class="box-card" shadow="never">
                        <template #header>
                            基本设置
                        </template>
                        <div class="text">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="信号名称" prop="name">
                                        <el-input v-model="formData.name" placeholder="请输入信号名称" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="信号编码" prop="id">
                                        <el-input v-model.number="formData.id" placeholder="请输入信号编码" disabled></el-input>
                                    </el-form-item>
                                </el-col>

                                <!-- <el-col :span="12">
                                    <el-form-item label="索引号" prop="index">
                                        <el-input v-model.number="formData.index" placeholder="请输入索引号"></el-input>
                                    </el-form-item>
                                </el-col> -->

                            </el-row>

                        </div>
                    </el-card>
                    <el-card class="box-card mt10" shadow="never">
                        <el-card class="" shadow="never">
                            <template #header>
                                数据采集设置
                            </template>
                            <el-row :gutter="20">
                                <!-- <el-col :span="12">
                                    <el-form-item label="扫描间隔(ms)" prop="scanInterval">
                                        <el-input v-model.number="formData.scanInterval" placeholder="请输入扫描间隔"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="扫描超时(ms)" prop="scanTimeout">
                                        <el-input v-model.number="formData.scanTimeout" placeholder="请输入扫描超时"></el-input>
                                    </el-form-item>
                                </el-col> -->
                                <el-col :span="12">
                                    <el-form-item label="数据类型" prop="dataType">
                                        <el-select v-model="formData.dataType" placeholder="请选择数据类型" style="width: 100%;">
                                            <el-option label="无符号整型(2个寄存器)" :value="1"></el-option>
                                            <el-option label="布尔型(1个寄存器)" :value="2"></el-option>
                                            <el-option label="短整型(1个寄存器)" :value="3"></el-option>
                                            <el-option label="无符号短整型(1个寄存器)" :value="4"></el-option>
                                            <el-option label="整型(2个寄存器)" :value="5"></el-option>
                                            <el-option label="单精度浮点数(2个寄存器)" :value="6"></el-option>
                                            <el-option label="双精度浮点数(4个寄存器)" :value="7"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="请求类型" prop="requestType">
                                        <el-select v-model="formData.requestType" placeholder="请选择请求类型" style="width:100%">
                                            <el-option label="保持寄存器" :value="1"></el-option>
                                            <el-option label="未知" :value="2"></el-option>
                                            <el-option label="线圈状态" :value="3"></el-option>
                                            <el-option label="输入寄存器" :value="4"></el-option>
                                            <el-option label="输入状态" :value="5"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="数据地址" prop="dataAddress">
                                        <el-input v-model="formData.dataAddress" placeholder="请输入数据地址"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="位域偏移" prop="bitOffset">
                                        <el-input v-model.number="formData.bitOffset" placeholder="请输入位域偏移"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="字节顺序" prop="byteOrder">
                                        <el-select v-model="formData.byteOrder" placeholder="请选择字节顺序" style="width: 100%;">
                                            <el-option label="大端" :value="1"></el-option>
                                            <el-option label="小端" :value="2"></el-option>
                                            <el-option label="大端字节交换" :value="3"></el-option>
                                            <el-option label="小端字节交换" :value="4"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-card>
                        <el-card class="mt10 mb10" shadow="never">
                            <template #header>
                                线性转换
                            </template>
                            <el-row :gutter="20">
                                <!-- <el-col :span="12">
                                    <el-form-item label="最大值" prop="maxValue">
                                        <el-input v-model.number="formData.maxValue" placeholder="请输入最大值"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="最小值" prop="minValue">
                                        <el-input v-model.number="formData.minValue" placeholder="请输入最小值"></el-input>
                                    </el-form-item>
                                </el-col> -->
                                <el-col :span="12">
                                    <el-form-item label="保留小数点位数" prop="decimalPlaces">
                                        <el-input v-model.number="formData.decimalPlaces"
                                            placeholder="请输入保留小数点位数"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="倍率" prop="multiple">
                                        <el-input v-model.number="formData.multiple" placeholder="请输入倍率"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="自定义函数" prop="customFunction">
                                        <el-input v-model="formData.customFunction" placeholder="请输入自定义函数"
                                            type="textarea" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-card>

                    <!-- <el-card class="box-card mt10" shadow="never">
                        <template #header>
                            数值变化和定时上报设置
                        </template>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="变化阈值" prop="changeThreshold">
                                    <el-input v-model.number="formData.changeThreshold" placeholder="请输入变化阈值"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="变化百分比" prop="changePercentage">
                                    <el-input v-model.number="formData.changePercentage" placeholder="请输入变化百分比"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="上送周期(m)" prop="uploadPeriod">
                                    <el-input v-model.number="formData.uploadPeriod" placeholder="请输入上送周期"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card> -->

                    <el-card class="box-card mt10" shadow="never">
                        <template #header>
                            告警上下限设置
                        </template>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="低限" prop="lowLimit">
                                    <el-input v-model.number="formData.lowLimit" placeholder="请输入低限"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="高限" prop="highLimit">
                                    <el-input v-model.number="formData.highLimit" placeholder="请输入高限"></el-input>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="12">
                                <el-form-item label="过低限" prop="lowAlarmLimit">
                                    <el-input v-model.number="formData.lowAlarmLimit" placeholder="请输入过低限"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="过高限" prop="highAlarmLimit">
                                    <el-input v-model.number="formData.highAlarmLimit" placeholder="请输入过高限"></el-input>
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                    </el-card>

                    <!-- <el-card class="box-card mt10" shadow="never">
                        <template #header>
                            信号列表
                        </template>
                        <el-table class="mb10" border :data="signalList">
                            <el-table-column label="信号编码" prop="code"></el-table-column>
                            <el-table-column label="信号名称" prop="name"></el-table-column>
                            <el-table-column label="信号分类" prop="category"></el-table-column>
                            <el-table-column label="状态值" prop="status"></el-table-column>
                            <el-table-column label="屏蔽上报" prop="reporting"></el-table-column>
                        </el-table>
                    </el-card> -->
                </el-form>
            </div>
        </div>
        <template #footer>
            <div style="flex: auto">
                <!-- <el-button type="primary" @click="submitForm(formRef)">保 存</el-button> -->
                <el-button @click="handleClose"> 取 消</el-button>
                <!-- <el-button @click="resetForm(formRef)"></el-button> -->
            </div>
        </template>
    </el-drawer>
    <AddMonitorForm ref="addMonitorForm" :dialogVisible="dialogVisible" @closeAddMonitor="closeAddMonitor" />
</template>

<script setup lang="ts">
import { defineProps, defineEmits, reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import AddMonitorForm from '@/views/gatherOrder/codelibrary/addMonitorForm.vue'

// 定义接收的属性类型
const props = defineProps({
    monitorVisible: {
        type: Boolean,
        required: true
    }
});
// 定义自定义事件类型
const emits = defineEmits(['closeMonitor']);
const handleClose = () => {
    emits('closeMonitor', false)
    console.log('emitsemits')
}
// 左侧树开始
interface Tree {
    id: number
    label: string
    children?: Tree[]
}
const handleNodeClick = (data: Tree) => {
    console.log(data)
}
const data: Tree[] = [
    {
        id: 1,
        label: '设备型号A001(2个信号)',
        children: [
            {
                id: 2,
                label: '室内环境温度',
            },
            {
                id: 3,
                label: '室内环境湿度',
            },
        ],
    },
]

const defaultProps = {
    children: 'children',
    label: 'label',
}

// 右侧
interface FormData {
    name: string;
    dataType: number;
    index: number;
    id: number;
    scanInterval: number;
    scanTimeout: number;
    requestType: number;
    dataAddress: string;
    bitOffset: number;
    byteOrder: number;
    maxValue: number;
    minValue: number;
    decimalPlaces: number;
    multiple: number;
    customFunction: string;
    changeThreshold: number;
    changePercentage: number;
    uploadPeriod: number;
    lowLimit: number;
    highLimit: number;
    lowAlarmLimit: number;
    highAlarmLimit: number;
}
const formData = reactive<FormData>({
    name: '监控室内环境温度',
    dataType: 1,
    index: 0,
    id: 0,
    scanInterval: 0,
    scanTimeout: 0,
    requestType: 1,
    dataAddress: '',
    bitOffset: 0,
    byteOrder: 1,
    maxValue: 0,
    minValue: 0,
    decimalPlaces: 0,
    multiple: 0,
    customFunction: '',
    changeThreshold: 0,
    changePercentage: 0,
    uploadPeriod: 0,
    lowLimit: 0,
    highLimit: 0,
    lowAlarmLimit: 0,
    highAlarmLimit: 0
});


const formRules = reactive<FormRules<FormData>>({
    name: [
        { required: true, message: '监控点名称不能为空', trigger: 'blur' }
    ],
    dataType: [
        { required: true, message: '数据类型不能为空', trigger: 'change' }
    ],
    index: [
        { required: true, message: '索引号不能为空', trigger: 'blur' }
    ],
    id: [
        { required: true, message: '监控点ID不能为空', trigger: 'blur' }
    ],
    scanInterval: [
        { required: true, message: '扫描间隔不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ],
    scanTimeout: [
        { required: true, message: '扫描超时不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ],
    requestType: [
        { required: true, message: '请求类型不能为空', trigger: 'change' }
    ],
    dataAddress: [
        { required: true, message: '数据地址不能为空', trigger: 'blur' }
    ],
    bitOffset: [
        { required: true, message: '位域偏移不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ],
    byteOrder: [
        { required: true, message: '字节顺序不能为空', trigger: 'change' }
    ],
    maxValue: [
        { required: true, message: '最大值不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ],
    minValue: [
        { required: true, message: '最小值不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ],
    decimalPlaces: [
        { required: true, message: '保留小数点位数不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ],
    multiple: [
        { required: true, message: '倍率不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ],
    customFunction: [
        { required: true, message: '自定义函数不能为空', trigger: 'blur' }
    ],
    changeThreshold: [
        { required: true, message: '变化阈值不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ],
    changePercentage: [
        { required: true, message: '变化百分比不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ],
    uploadPeriod: [
        { required: true, message: '上送周期不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ],
    lowLimit: [
        { required: true, message: '低限不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ],
    highLimit: [
        { required: true, message: '高限不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ],
    lowAlarmLimit: [
        { required: true, message: '过低限不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ],
    highAlarmLimit: [
        { required: true, message: '过高限不能为空', trigger: 'blur' },
        { validator: validateNumber, trigger: 'blur' }
    ]
});

function validateNumber(rule: any, value: string, callback: any) {
    if (!/^\d+$/.test(value)) {
        callback(new Error('请输入数字'));
    } else {
        callback();
    }
}
const formRef = ref<FormInstance>()
const editMonitor = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}


interface Signal {
    code: string;
    name: string;
    category: string;
    status: string;
    reporting: string;
}

const signalList = ref<Signal[]>([
    { code: '001', name: 'Signal 1', category: 'Category 1', status: '0', reporting: '不屏蔽' },
    { code: '002', name: 'Signal 2', category: 'Category 2', status: '1', reporting: '不屏蔽' },
    // 添加更多信号...
]);

// 添加
const addMonitorForm = ref()
const dialogVisible = ref(false)
const addMonitor = () => {
    dialogVisible.value = true
}
const closeAddMonitor = (v: any) => {
    dialogVisible.value = v
}


</script>


<style lang="scss"></style>